	/**
	 * 流程类别页面
	 */
<template>
	<view>
		<!-- 注意事项: 不能使用 index 作为 key 的唯一标识 -->
		<view class="main">
			<!-- <view v-for="(item, index) in category" :key="item.id" class="item">
				<navigator url="../askLeave/askLeave">
					<view class="icon" v-if="index === 0">
						<u-icon name="edit-pen-fill" color="#2979ff" size="50"></u-icon>
					</view>
					<view class="icon" v-else-if="index === 1">
						<u-icon name="map-fill" color="#2979ff" size="50"></u-icon>
					</view>
					<view class="icon" v-else-if="index === 2">
						<u-icon name="home-fill" color="#2979ff" size="50"></u-icon>
					</view>
					<view class="title">
						{{item.name}}
					</view>
				</navigator>
			</view> -->
			<view class="item">
				<navigator url="../askLeave/askLeave">
					<view class="icon">
						<u-icon name="home-fill" color="#2979ff" size="50"></u-icon>
					</view>
					<view class="title">
						请假流程
					</view>
				</navigator>
			</view>
			<view class="item">
				<navigator url="../askPay/askPay">
					<view class="icon">
						<u-icon name="rmb" color="#2979ff" size="50"></u-icon>
					</view>
					<view class="title">
						用款流程
					</view>
				</navigator>
			</view>
			<view class="item">
				<navigator url="../askExpense/askExpense">
					<view class="icon">
						<u-icon name="coupon" color="#2979ff" size="50"></u-icon>
					</view>
					<view class="title">
						报销流程
					</view>
				</navigator>
			</view>
			<view class="item">
				<navigator url="../askSeal/askSeal">
					<view class="icon">
						<u-icon name="order" color="#2979ff" size="50"></u-icon>
					</view>
					<view class="title">
						用章申请
					</view>
				</navigator>
			</view>
			<view class="item">
				<navigator url="../askBusiness/askBusiness">
					<view class="icon">
						<u-icon name="order" color="#2979ff" size="50"></u-icon>
					</view>
					<view class="title">
						业务申请
					</view>
				</navigator>
			</view>
		</view>
		<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import processApi from '../../api/processCate.js'
	export default {
		created() {
			// 请求获得流程类别
			processApi.getCateList({
				'X-Access-Token': this.$store.state.token
			}).then(res => {
				console.log(res)
				this.category = res.data.result;
			}).catch(err => {
				console.log(this.token)
			})
		},
		onLoad() {
			/**
			 * 示例中为每个tabbar页面都写了一遍tabbar变量，您可以将tabbar数组写入到vuex中，这样可以全局引用
			 */
			this.tabbar = this.$store.state.tabbar
		},
		data() {
			return {
				// 流程分类
				category: [],
				// 设置tabbar
				tabbar: '',
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.main {
	font-size: 18px;
	width: 280px;
	margin: 0 auto;
	.item {
		display: flex;
		position: relative;
		height: 80px;
		line-height: 80px;
		margin-top: 30px;
		background-color: #f5f5f5;
		border-radius: 5%;
		box-shadow: 5px 5px 3px #afafaf;
		.icon {
			position: absolute;
			left: 50px;
		}
		.title {
			width: 200px;
			position: absolute;
			text-align: center;
			right: 20px;
		}
	}
}
</style>
